<template>
  <div class="app-container"
       v-wechat-title="'登陆日志'">
    <el-card class="box-card">
      <el-form ref="queryForm" :inline="true" :model="queryParams" label-width="68px" size="small">
        <el-form-item>
          <el-button type="danger" icon="el-icon-delete" :disabled="multiple || isAuth('sys:login-log:delete')" @click="handleDelete">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-input
              v-model="queryParams.username"
              clearable
              placeholder="用户昵称"
              size="small"
              style="width: 150px;margin-left: 10px"
              @keyup.enter.native="handleQuery"
          />
          <el-input
              clearable
              class="filter-item"
              v-model="queryParams.ip"
              style="width: 150px;margin-left: 10px"
              placeholder="ip地址"
              @keyup.enter.native="handleQuery">
          </el-input>

          <el-select v-model="queryParams.loginFrom" placeholder="登入地点" style="width: 150px;margin-left: 10px">
            <el-option
                v-for="item in loginFromOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-input
              clearable
              class="filter-item"
              v-model="queryParams.location"
              style="width: 150px;margin-left: 10px"
              placeholder="输入登入地址"
              @keyup.enter.native="handleQuery()">
          </el-input>
          <el-date-picker
              v-model="timeKeyWord"
              type="datetimerange"
              :picker-options="pickerOptions"
              style="margin-left: 10px"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']"
              value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格-->
      <el-table
          border
          :data="logData"
          @selection-change="selectionChangeHandle">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="ID"
            width="180">
        </el-table-column>
        <el-table-column
            prop="username"
            label="登入用户"
            width="180">
        </el-table-column>
        <el-table-column
            prop="location"
            label="登入地点">
        </el-table-column>
        <el-table-column
            prop="ip"
            label="IP地址">
        </el-table-column>
        <el-table-column
            prop="userSystem"
            label="操作系统">
        </el-table-column>
        <el-table-column
            prop="userBrowser"
            label="浏览器">
        </el-table-column>
        <el-table-column
            prop="loginTime"
            label="登入时间">
        </el-table-column>
        <el-table-column
            prop="client"
            :formatter="loginFormFormat"
            label="客户端">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="155">
          <template slot-scope="scope">
            <el-button
                plain
                size="mini"
                type="danger"
                :disabled="isAuth('sys:login-log:delete')"
                @click="handleDelete(scope.row)"> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="pagination.total>0"
          :limit.sync="pagination.pageSize"
          :page.sync="pagination.currentPage"
          :total="pagination.total"
          @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script>
import {pageLoginLog,deleteLoginLog} from "@/api/log/login";

export default {
  name: "index",
  data() {
    return {
      // 非多个禁用
      multiple: true,
      // 选中数组
      ids: [],
      logData: [],
      timeKeyWord:[],
      queryParams: {
        username: '',
        ip: '',
        location: '',
        startTime: '',
        endTime:'',
        loginFrom:'',
        currentPage: 1,
        pageSize: 10
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      loginFromOptions:[
        {
          value: 'admin',
          label: '后台管理系统'
        }, {
          value: 'web',
          label: '门户'
        }, {
          value: '未知',
          label: '未知'
        },
      ]
    }
  },
  methods: {
    handleDelete(row) {
      const ids = [row.id || this.ids].join(',')
      this.$confirm('确认删除已选中的数据项？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteLoginLog(ids).then((res) => {
          if (res.status) {
            this.$message.success('删除成功');
            this.handleQuery();
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
      })
    },
    handleQuery() {
      this.queryParams.currentPage = this.pagination.currentPage
      this.queryParams.pageSize = this.pagination.pageSize
      if (this.timeKeyWord) {
        this.queryParams.startTime = this.timeKeyWord[0]
        this.queryParams.endTime = this.timeKeyWord[1]
      }else {
        this.queryParams.startTime = ''
        this.queryParams.endTime = ''
      }
      pageLoginLog(this.queryParams).then(res => {
        this.logData = res.data.records
        this.pagination.total = res.data.total
        this.pagination.currentPage = res.data.current
        this.pagination.pageSize = res.data.size
      })
    },
    // 多选
    selectionChangeHandle(selection) {
      this.ids = selection.map(item => item.id)
      this.multiple = !selection.length
    },
    //重置
    handleReset() {
      this.pagination = {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
      this.queryParams = {
      }
      this.timeKeyWord = []
      this.handleQuery()
    },
    //翻译
    loginFormFormat(row) {
      const client = row.client;
      if (!client) {
        return;
      }else if (client == 'client') {
        return '后台管理系统';
      }else if (client == 'web-client') {
        return '门户'
      }
    }
  },
  created() {
    this.handleQuery()
  }
}
</script>

